<template>
  <div class="el-custom-from">
    <el-tabs v-model="areaname" class="node-tabs-kts" v-loading="loading">
      <el-tab-pane name="area">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("formi18n.from_field_area_name") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="flowproperty-container container" :style="contentHeight">
                <el-form
                  ref="strpData"
                  :model="area"
                  label-width="100px"
                  class="demo-ruleForm"
                  size="mini"
                  :rules="rules"
                >
                  <el-form-item
                    size="small"
                    :label="$t('formi18n.area_property_CnName')"
                    prop="cnName"
                  >
                    <el-input v-model="area.areaCNName"></el-input>
                  </el-form-item>
                  <el-form-item
                    size="small"
                    :label="$t('formi18n.area_property_EnName')"
                    prop="enName"
                  >
                    <el-input v-model="area.areaENName"></el-input>
                  </el-form-item>
                  <el-form-item size="small" :label="$t('formi18n.area_property_Code')">
                    <el-input v-model="area.areaCode" disabled="1=1"></el-input>
                  </el-form-item>
                  <el-form-item size="small" :label="$t('formi18n.area_property_tableCode')">
                    <el-input v-model="area.tableCode" disabled="1=1"></el-input>
                  </el-form-item>
                  <el-form-item size="small" :label="$t('formi18n.area_property_mainTable')">
                    <el-input v-model="area.mainTable" disabled="1=1"></el-input>
                  </el-form-item>
                  <el-form-item
                    size="small"
                    :label="$t('formi18n.area_property_presentation')"
                    v-if="area.records"
                  >
                    <el-radio-group
                      v-model="area.presentation"
                      size="mini"
                      class="el-field-area-columens"
                    >
                      <el-radio-button :label="0">{{ $t("formi18n.presentation_1") }}</el-radio-button>
                      <el-radio-button :label="1">{{ $t("formi18n.presentation_2") }}</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    size="small"
                    :label="$t('formi18n.area_property_columens')"
                    v-if="area.presentation==0"
                  >
                    <el-radio-group
                      v-model="area.columnes"
                      size="mini"
                      class="el-field-area-columens"
                    >
                      <el-radio-button :label="1">{{ $t("i18n.columnes_1") }}</el-radio-button>
                      <el-radio-button :label="2">{{ $t("i18n.columnes_2") }}</el-radio-button>
                      <el-radio-button :label="3">{{ $t("i18n.columnes_3") }}</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    size="small"
                    :label="$t('formi18n.area_property_Rows')"
                    v-if="area.records"
                    prop="rowes"
                  >
                    <el-input type="number" v-model="area.rowes" :max="1000" :min="1"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-main>
            <el-footer>
              <div class="form_handle-box">
                <el-button
                  plain
                  type="primary"
                  @click="SaveEvent()"
                  size="mini"
                >{{ $t("table.Global_Save") }}</el-button>

                <el-button
                  plain
                  type="danger"
                  @click="BackEvent()"
                  size="mini"
                >{{ $t("table.Global_Back") }}</el-button>
              </div>
            </el-footer>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
export default {
  name: "area-property",

  data() {
    var checkRow = (rule, value, callback) => {
      value = this.area.rowes;
      if (value === undefined || value === "" || value === null) {
        return callback(new Error(this.$t("errori18n.err_area_property_Rows")));
      } else {
        if (parseInt(value) > 1000) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else if (parseInt(value) <= 0) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_Rows_greater"))
          );
        } else {
          callback();
        }
      }
    };
    var checkCNNanme = (rule, value, callback) => {
      value = this.area.areaCNName;
      if (value === undefined || value === "" || value === null) {
        return callback(
          new Error(this.$t("errori18n.err_area_property_CNName"))
        );
      } else {
        if (value.length > 15) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_CNName_length"))
          );
        } else {
          callback();
        }
      }
    };
    var checkENNanme = (rule, value, callback) => {
      value = this.area.areaENName;
      if (value === undefined || value === "" || value === null) {
        return callback(
          new Error(this.$t("errori18n.err_area_property_ENName"))
        );
      } else {
        if (value.length > 30) {
          return callback(
            new Error(this.$t("errori18n.err_area_property_eNName_length"))
          );
        } else {
          callback();
        }
      }
    };
    return {
      area: {},
      loading: false,
      areaname: "area",
      autoHeight: {
        height: "",
        width: "98%",
        margin: "11px",
        float: "left"
      },
      contentHeight: {
        height: ""
      }, ///数据验证规则
      rules: {
        cnName: [{ required: true, trigger: "blur", validator: checkCNNanme }],
        enName: [{ required: true, trigger: "blur", validator: checkENNanme }],
        rowes: [{ required: true, trigger: "blur", validator: checkRow }]
      }
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 200 + "px";
    },
    BackEvent() {
      this.area = {};
      this.$emit("AreaPropetryEvent");
    },
    InitProperty(areaproperty) {
      this.area = {
        areaId: areaproperty.areaId,
        areaCNName: areaproperty.areaCNName,
        areaCode: areaproperty.areaCode,
        areaENName: areaproperty.areaENName,
        areaSeq: areaproperty.areaSeq,
        columnes: areaproperty.columnes,
        fields: areaproperty.fields,
        mainTable: areaproperty.mainTable,
        presentation: areaproperty.presentation,
        records: areaproperty.records,
        rowes: areaproperty.rowes,
        tableCode: areaproperty.tableCode,
        usable: areaproperty.usable
      };
    },
    ///保存属性
    SaveEvent() {
      this.$refs["strpData"].validate(valid => {
        if (valid) {
          this.$emit("AreaPropetryEvent", this.area);
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }
};
</script>